import React, { useMemo } from 'react';
import { Form, TextField, DataSet, Button, Modal } from 'choerodon-ui/pro';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { ButtonType } from 'choerodon-ui/pro/lib/button/enum';
import Record from 'choerodon-ui/pro/lib/data-set/Record';
import shopDS from './stores/shopDataSet';
import Detail from './Detail';
import './index.less';

const detailModalKey = Modal.key();

const ShopDetail = () => {
  const shopDataSet = useMemo(() => new DataSet(shopDS()), []);

  const handleModalCancel = (record: Record) => {
    if (record) {
      record.reset();
    }
  };

  const handleMoreEdit = () => {
    Modal.open({
      key: detailModalKey,
      title: '编辑',
      drawer: true,
      children: (<Detail record={shopDataSet.current} dataSet={shopDataSet} />),
      onCancel: () => handleModalCancel(shopDataSet.current!),
    });
  };

  return (
    // 设置 <> 或者 div 避免在工程中使用的时候 因为 GUmUIFlag 的插入导致样式等的错位
    <PageHeaderWrapper title="form">
      <>
        <Form className="has-button" dataSet={shopDataSet}>
          <TextField name="code" />
          <TextField name="name" />
          <TextField name="price" />
          <TextField name="count" />
          <div>
            <Button type={ButtonType.submit}>提交</Button>
            <Button type={ButtonType.reset} style={{ marginLeft: 8 }}>重置</Button>
            <Button type={ButtonType.button} style={{ marginLeft: 8 }} onClick={handleMoreEdit}>更多编辑</Button>
          </div>
        </Form>
      </>
    </PageHeaderWrapper>
  );
};

export default ShopDetail;